<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://jawr.net/tags" prefix="jwr" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Geosite GPS / AVL WEB</title>
        
        <!-- Favicon -->
        <link rel="shortcut icon" type="image/x-icon" href="security/resources/images/favicon.ico" />
		
		<jwr:script src="/bundles/security.js"/>
		<jwr:style src="/bundles/security.css" />
		
		<script type="text/javascript">
			function onload(){
				$("#usuario").focus();
				
				$("#senha").keypress(function(e){
					if(e.which == 13 ){
						login();
					}
				});
                                verificaBrowser();
			}
			
                        function verificaBrowser(){
                            if ($.browser.msie) {
                                if(parseInt($.browser.version) < 9){
                                    $('#usuario').attr({
                                        'disabled': 'disabled'
                                    });
                                    $('#senha').attr({
                                        'disabled': 'disabled'
                                    });
                                    $('#botaoEntrar').attr({
                                        'disabled': 'disabled'
                                    });
                                    //exibir mensagem
                                     $('#alertaBrowser').css("display", "block");
                                    return ;
                                }
                            }
                        }
			function login(){
				var params = $('#form-login').serialize();
                                
				if($('#usuario').val() == "Usuário"){
					$('#senhaErrado').fadeOut();
					$('#usuarioErrado').fadeIn();
					$('#msg').fadeOut(function(){
						$('#msg').html("Favor informar o usuário").fadeIn();	
					});
					return ;
				}
				
				if($('#senha').val() == "Senha"){
					$('#usuarioErrado').fadeOut();
					$('#senhaErrado').fadeIn();
					$('#msg').fadeOut(function(){
						$('#msg').html("Favor informar a senha").fadeIn();
					});
					return ;
				}
				
				$('#load').fadeIn();
				$('#usuarioErrado').fadeOut();
				$('#senhaErrado').fadeOut();
				$('#msg').fadeOut(function(){
					$.ajax({
						type     : "POST",
						url      : "rest/security/login",
						data     : params,
						cache    : false,
						dataType : "html",
			            success  : function(data){
							window.location.href = window.location;
							$('#load').fadeOut();
			            },
						error    : function(jqXHR, textStatus, errorThrown){
							$('#msg').html(jqXHR.responseText).fadeIn();
							$('#load').fadeOut();
						}
					});
				});
				
			}
		</script>
	</head>
    
	<body id="body" onload="onload();">
		<div class="sombra s1"></div>
		<div class="sombra s2"></div>
		<div class="sombra s3"></div>
		<div class="sombra s4"></div>
		
        <!-- COMPATIBILIDADE BROWSER-->
        <div class="sombra s4"></div>
        
        <div id="alertaBrowser" class="alertaBrowser">   
            <strong>Seu navegador está desatualizado.</strong> Para continuar atualize-o ou escolha outro navegador.<br/>
        </div>
        
        <!-- Login -->
		<div class="blocoLogin">
                    
                    <div class="blocoForm">
                        <img class="logo" src="security/resources/images/logo.png" alt="Geosite GPS / AVL WEB" />
                        <h1>&nbsp;</h1>
                        <form id="form-login">
                                <span class="inpText">
                                    <div class="usuario"></div>
                                    <!--<div class="certo"></div> -->
                                    <div id="usuarioErrado" class="errado" style="display: none;"></div>
                                    <input id="usuario" type="text" name="usuario" value="Usuário" title="Usuário" onfocus="if(this.value==this.title)this.value='';" onblur="if(this.value=='')this.value=this.title;" />
                                </span>
                                <span class="inpText">
                                    <div class="senha"></div>
                                    <!--<div class="certo"></div> -->
                                    <div id="senhaErrado" class="errado" style="display: none;"></div>
                                    <input id="senha" type="password" name="senha" value="Senha" title="Senha" onfocus="if(this.value==this.title){this.value='';this.type='password'};" onblur="if(this.value==''){this.value=this.title;this.type='text';}"/>
                                </span>
                                <!-- <a href="javascript:Lightbox.show('modalRecuperarSenha')" class="link">Esqueci minha senha</a><br clear="all"/> -->
                                <br clear="all"/>
                                <a href="javascript:login()" id="botaoEntrar" class="btnLogin">ENTRAR</a>
                                <span id="msg" class="msgErro"></span>
                        </form>
                    </div>
                    <div id="load" class="load"></div>
		</div>
                
        <!-- LightBox -->
        <div id="modalRecuperarSenha" class="lightbox-window modalRecuperarSenha">
            <a href="javascript:Lightbox.hide();" class="close transp"></a>
            <div class="item">
                <div class="recuperar">
                    <a href="javascript:Lightbox.hide()" class="btn_fechar"></a>
                    <label class="titulo" id="tituloModal">Recuperar Senha</label>
                    <label class="texto" id="textoModal">Informe seu e-mail para a recuperação da senha.</label>
                    
                    <input type="text" class="input" name="usuario" value="E-mail" title="E-mail" onfocus="if(this.value==this.title)this.value='';" onblur="if(this.value=='')this.value=this.title;"/>
                   <span class="icone"></span>
                   <a href="javascript:recuperarSenha()" class="btn btn_green btn_salvar">ENVIAR</a>
                </div>
            </div>
        </div>
	</body>
</html>